<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tone莫斯码小测2.0</title>
    <script src="../libs/Tone.js"></script>
    <script src="../libs/Unify.js"></script>
    <script src="../libs/TimeFactory.js"></script>
    <script src="../libs/moonJs.js"></script>
    <script src="../libs/ColorManager.js"></script>
    <script src="../libs/p2.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            background-color: #000000;
        }
    </style>
</head>
<body>
    <script>
        var moonjs = new MoonJs();
        var canvas=moonjs.createCanvasByMobile();
        moonjs.init(canvas)
        moonjs.start();//开始渲染

        const cc='F6'
        var synth = new Tone.PolySynth(Tone.Synth).toDestination();
        var colors=ColorManager.warnCoolColors([2,3,5,6,9,10,11,9]);
        let fontSize=50;
        if(Unify.isMobile()) fontSize=100;
        const [wid,hei]=[canvas.width,canvas.height];
        let btnNames=['.','-'];
        let btnw=wid*0.5;
        for(let i=0;i<btnNames.length;i++){
            let name=btnNames[i];
            let btn=moonjs.createRectText(name,btnw,btnw,'#000',colors[i]);
            btn.childs[0].setFont(`${fontSize}px Arial`);
            btn.x=btnw*i+btnw/2;
            btn.y=hei-btnw/2;
            btn.name=name;
            moonjs.mouseTouch(btn,onClick);
        }
        let showLabel=moonjs.createRectText(' ',wid,btnw*0.5,'#000','#FFFFFF');
        showLabel.childs[0].setFont(`${fontSize}px Arial`);
        showLabel.setXY(wid/2,hei-btnw-btnw/4);
        moonjs.mouseTouch(showLabel,()=>{rightWrong(0)});
        //console.log(showLabel.y)

        let cards=[];
        let codes=[];
        let index=0;
        let letters=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
        let total=letters.length;
        letters.sort((a)=>{return Math.random()-0.5;})
        let gap=total/26/2;
        let cardw=wid*0.8;
        let ox=cardw/2
        for(let i=0;i<total;i++){
            let color=colors[Math.floor(Math.random()*colors.length)];
            let name=letters[i];
            let card=moonjs.createRectText(name,cardw,wid,'#FFFFFF',color);
            card.name=name;
            card.x=wid-ox//-i*gap;
            card.y=wid/2+10;
            card.data={x:card.x,y:card.y,t:card.childs[0]}
            card.data.t.setFont(`${fontSize*2}px Arial`);
            cards.push(card);
        }
        cards.reverse();
        resetCard();
        function resetCard(){
            index=0;
            cards[0].x=ox;
            letters.sort((a)=>{return Math.random()-0.5;})
            for(let i=1;i<cards.length;i++){
                let card=cards[i];
                let name=letters[i];
                card.x=card.data.x;
                card.y=card.data.y;
                card.name=name;
                card.data.t.setText(name)
            }
            TimeFactory.useTime('keyName',0);
        }
        function onClick(btn){
            console.log(btn.name);
            codes.push(btn.name)
            if(btn.name=='.'){
                synth.triggerAttackRelease(cc, '64n');
            }else{
                synth.triggerAttackRelease(cc, '16n');
            }
            let mosi='';
            codes.forEach(function(code){
                mosi+=code;
            })
            let letter=Unify.mosi(mosi,1)
            showLabel.childs[0].setText(letter+mosi);
            if(codes.length<6){
                card=cards[index];
                console.log(card.name,letter,card.name==letter)
                if(card.name==letter){
                    setTimeout(()=>{
                        moonjs.to(card,{x:-wid},300);
                        rightWrong(1);
                    },500);
                }
            }else{
                rightWrong(0);
            }    
        }
        function rightWrong(type){
            codes.length=0;
            showLabel.childs[0].setText(' ');
            if(type){
                index++;
                if(index==cards.length){
                    TimeFactory.useTime('keyName',1,gameOver,'');
                }else{
                    card=cards[index];
                    moonjs.to(card,{x:ox},500);
                }
                synth.triggerAttackRelease('A7', '8n');
            }else{
                synth.triggerAttackRelease('D3', '8n');
            }
        }
        function gameOver(num){
            num=TimeFactory.formatTime(num/1000,1)
            alert('游戏结束,用时是'+num);
            setTimeout(()=>{resetCard();},500);
        }
    </script>
</body>

</html>
